<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">编辑文章</Col>
       </Row>
       <div class="table-box" style="overflow: auto;">
           <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="标题" prop="title">
                    <Input v-model="formValidate.title" placeholder="输入标题"></Input>
                </FormItem>
                <FormItem label="图片" prop="pic">
                    <Row>
                        <Col span="14">
                            <Input v-model="formValidate.pic"></Input>
                        </Col>
                        <Col span="10">
                             <Upload 
                                action="/api/uploadImage.php?file=file" 
                                :show-upload-list="false"
                                :on-success="uploadImageSuccess"
                                :on-error="uploadImageError"
                                :format="['jpg','jpeg','png','gif']"
                                :max-size="2048">
                                <Button type="primary" style="margin-left: 20px;">上传图片</Button>
                            </Upload>
                        </Col>
                    </Row>
                </FormItem>
                <FormItem label="是否推荐" prop="type">
                    <RadioGroup v-model="formValidate.recommend">
                        <Radio :label="index" v-for="(item, index) in recommendType" :key="index">{{item}}</Radio>
                    </RadioGroup>
                </FormItem>
    
                <!--测试-->
                <FormItem :label="field.name" v-for="(field, index) in fieldList" :key="index" :prop="field.field">
                    <!--文本-->
                    <Input v-model="formValidate[field.field]" placeholder="输入标题" v-if="field['formType'] === 0"></Input>
                    <!--下拉选项-->
                    <Select v-model="formValidate[field.field]" placeholder="请选择" v-if="field['formType'] === 1">
                        <Option v-for="(item, index) in field['val']" :key="index" :value="index">{{item}}</Option>
                    </Select>
                    <!--单选框-->
                    <RadioGroup v-model="formValidate[field.field]" v-if="field['formType'] === 2">
                        <Radio :label="index" v-for="(item, index) in field['val']" :key="index">{{item}}</Radio>
                    </RadioGroup>
                    <!--复选框-->
                    <CheckboxGroup v-model="formValidate[field.field]" v-if="field['formType'] === 3">
                        <Checkbox :label="index" v-for="(item, index) in field['val']" :key="index">{{item}}</Checkbox>
                    </CheckboxGroup>
                    <!--多行文本框-->
                    <Input v-model="formValidate[field.field]" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入···" v-if="field['formType'] === 4"></Input>
                    <!--上传图片-->
                    <Row v-if="field['formType'] === 5">
                        <Col span="14">
                            <Input v-model="formValidate[field.field]" :readonly="true" ></Input>
                        </Col>
                        <Col span="10">
                             <Upload 
                                :action="action" 
                                :show-upload-list="false"
                                :on-success="field.uploadSuccessFn"
                                :on-error="uploadImageError"
                                :format="['jpg','jpeg','png','gif']"
                                :max-size="2048">
                                <Button type="primary" style="margin-left: 20px;">上传图片</Button>
                            </Upload>
                        </Col>
                    </Row>
                </FormItem>
                <!--测试结束-->

                <FormItem label="描述" prop="description">
                    <Input v-model="formValidate.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入···"></Input>
                </FormItem>
                <FormItem label="内容" prop="content">
                    <textarea id="editorEditArt" name="editorEditArt" ></textarea>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交添加</Button>
                </FormItem>
            </Form>
       </div>
    </div>
</template>
<script>
    export default {
        data () {
            var query = this.$route.query;
            var article = JSON.parse(query.article);
            var fieldList = JSON.parse(query.fieldList);
            var id = parseInt(article.id);
            var recommend = parseInt(article.recommend);
            var catId = parseInt(article.catId);
            var title = article.title;

            var formValidate = {
                                    title: article.title,
                                    description: '',
                                    recommend: recommend,
                                    content: '',
                                    pic: article.pic
                                };
            var ruleValidate = {
                                    title: [
                                        { required: true, message: '不能为空！', trigger: 'blur' }
                                    ],
                                    description: [
                                        { required: true, message: '不能为空！', trigger: 'blur' }
                                    ],
                                    recommend: [{ required: true, message: '不能为空！'}],
                                    content: [{ required: true, message: '不能为空！'}],
                                    pic: [
                                        { required: true, message: '不能为空！',}
                                    ]
                                };
            var len = fieldList.length;
            for(var i=0; i<len; i++){
                var item = fieldList[i];
                var field = item.field;

                item.formType = parseInt(item.formType);
                formValidate[field] = null;
                ruleValidate[field] = [{ required: true, message: '不能为空！'}];

                if(item.formType === 1 || item.formType===2 || item.formType === 3) {
                    var valArr = (item.val).split('||');
                    formValidate[field] = 0
                    item.val = valArr;
                }
                if(item.formType === 3){
                    formValidate[field] = [];
                    ruleValidate[field] = [];
                }
                if(item.formType === 5){
                    var uploadSuccessFn = 'uploadImageSuccess_' + item.field;
                    var that = this;
                    this[uploadSuccessFn] = function(param){
                        that.formValidate[item.field] = param.url;
                    }
                    item.uploadSuccessFn = this[uploadSuccessFn];
                }
            }


           return {
                fieldList: fieldList,
                action: this.uploadPicPath,
                id: id,
                catId: catId,
                recommendType: this.$fieldType.recommendType,
                formValidate: formValidate,
                ruleValidate: ruleValidate
           };
        },
        created: function () {
            // 获取文章信息
            this.getOneInfo();
        },
        mounted() {
        },
        methods: {
            handleSubmit (name) {
                var that = this;
                that.formValidate.content = that.editor.getData();
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        var formValidate = that.$util.copy(that.formValidate);
                        var fieldList = that.fieldList;
                        var len = fieldList.length;
                        for(var i=0; i<len; i++){
                            var item = fieldList[i];
                            if(item.formType === 3){
                                formValidate[item.field] = JSON.stringify(formValidate[item.field]);
                            }
                        }
                        formValidate['id'] = that.id;
                        formValidate['catId'] = that.catId;

                        that.$loading.show('更新中');
                        that.$util.ajax({
                            that: that,
                            url: '/article/edit/',
                            data: formValidate,
                            success: function(data){
                                that.$router.go(-1);
                            },
                            fail: function(msg){
                                that.$Message.info(msg);
                            },
                            complete: function(){
                                that.$loading.hide();
                            }
                        })
                    }
                })
            },
            getOneInfo(){
                var that = this;
                that.$loading.show('获取信息中···');
                that.$util.ajax({
                    that: that,
                    url: '/article/one/',
                    data: {
                        id: that.id,
                        catId: that.catId
                    },
                    success: function(data){
                        var data = data.data;
                        that.formValidate.description = data['description'];
                        that.formValidate.pic = data['pic'];
                        CKEDITOR.replace("editorEditArt", {
                             height: "250px",
                             width: "100%", 
                             toolbar: "Full",
                             filebrowserUploadUrl: that.CKeditorUploadPath
                          });
                        that.editor = CKEDITOR.instances.editorEditArt;
                        that.editor.setData(data['content']);

                        var fieldList = that.fieldList;
                        var len = fieldList.length;
                        for(var i=0; i<len; i++){
                            var field = fieldList[i];
                            if(field.formType === 3){
                                data[field.field] = JSON.parse(data[field.field]);
                            }
                            that.formValidate[field.field] = data[field.field];
                        }
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                })
            },
            // 图片上传成功
            uploadImageSuccess(param){
                this.formValidate.pic = param.url;
            },
            // 图片上传失败
            uploadImageError(param){
                console.log(param);
            }
        }
    }
</script>
<style scoped>
</style>